<template>
  <scroll-view>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            v-model="illnessInfo.illnessDesc"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>
        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            class="tag"
            :class="{ active: illnessInfo.illnessTime === item.id }"
            @click="illnessInfo.illnessTime = item.id"
            v-for="item in illnessTimeList"
            :key="item.id"
            >{{ item.name }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            :class="{ active: illnessInfo.consultFlag === item.id }"
            @click="illnessInfo.consultFlag = item.id"
            v-for="item in consultFlagList"
            :key="item.id"
            class="tag"
            >{{ item.name }}</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          @select="onUpload"
          limit="3"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          v-model="illnessInfo.pictures"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="!illnessInfo.illnessDesc" @click="onNext">
        下一步
      </button>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { uploadImageApi } from '@/api/consult'
  import type { UploadImage } from '@/types/consult'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { useConsultStore } from '@/stores/consult'
  interface Props {
    type: string
    illnessType: string
    depId: string
  }
  // 病情描述数据
  const illnessInfo = ref({
    illnessDesc: '',
    illnessTime: 1,
    consultFlag: 1,
    pictures: [] as UploadImage[],
  })

  const illnessTimeList = [
    { id: 1, name: '一周内' },
    { id: 2, name: '一个月内' },
    { id: 3, name: '半年内' },
    { id: 4, name: '大于半年' },
  ]

  const consultFlagList = [
    { id: 1, name: '就诊过' },
    { id: 0, name: '未就诊过' },
  ]

  const onUpload = async (e: UniHelper.UniFilePickerOnSelectEvent) => {
    // 5. 调用API
    const res = await uploadImageApi(e.tempFilePaths[0])
    console.log('res  ----->  ', res)

    illnessInfo.value.pictures.push(res)
  }

  // 3.
  const store = useConsultStore()
  const props = defineProps<Props>()
  const onNext = () => {
    // 3. 保存数据到pinia中, pinia自动持久化存储
    store.illnessInfo = illnessInfo.value
    store.illnessInfo = illnessInfo.value
    store.type = props.type
    store.illnessType = props.illnessType
    store.depId = props.depId

    // 编程式导航
    uni.navigateTo({
      url: '../../subpkg_archive/list/list?type=consult',
    })
  }

  onLoad(async () => {
    // 4. 提示用户要不要之前的数据
    const res = await uni.showModal({
      title: '温馨提示',
      content: '是否恢复之前填写的病情信息？',
      confirmText: '确认',
      confirmColor: '#16C2A3',
      cancelColor: '#848484',
    })

    if (res.confirm) {
      // 5. 还原数据
      illnessInfo.value = store.illnessInfo
    } else {
      // 6. 清空数据
      store.illnessInfo = {
        illnessDesc: '',
        illnessTime: 1,
        consultFlag: 1,
        pictures: [],
      }
    }
  })
</script>

<style scoped>
  @import './description.scss';
</style>
